<template>
  <div class="app-container">
    <!-- 顶部装饰条 -->
    <div class="tech-header-glow"></div>

    <el-card class="tech-main-card">
      <!-- 卡片头部 -->
      <template #header>
        <div class="tech-card-header">
          <div class="header-content">
            <div class="title-section">
              <i class="el-icon-search title-icon"></i>
              <h1 class="tech-title">病虫害智能识别</h1>
              <div class="title-sub">AI-Powered Plant Disease Detection</div>
            </div>
            <div class="status-section">
              <el-button
                class="tech-status-btn"
                @click="checkServiceHealth"
                :loading="healthLoading"
              >
                <i class="el-icon-monitor"></i>
                {{ serviceStatus ? '服务在线' : '服务检查' }}
                <div class="status-indicator" :class="{ online: serviceStatus }"></div>
              </el-button>
            </div>
          </div>
        </div>
      </template>

      <!-- 服务状态显示 -->
      <div class="service-status" v-if="serviceStatus !== null">
        <div class="status-card" :class="{ online: serviceStatus }">
          <i class="status-icon" :class="serviceStatus ? 'el-icon-success' : 'el-icon-error'"></i>
          <span class="status-text">{{ serviceStatus ? 'AI服务运行正常' : 'AI服务暂时不可用' }}</span>
          <div class="status-glow"></div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="tech-content">
        <el-row :gutter="30">
          <!-- 左侧上传区域 -->
          <el-col :span="12">
            <div class="tech-upload-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="el-icon-upload2"></i>
                  图像上传
                </h3>
                <el-button
                  class="clear-btn"
                  type="text"
                  @click="clearAll"
                >
                  <i class="el-icon-delete"></i>
                  清空所有
                </el-button>
              </div>

              <!-- 上传区域 -->
              <div class="upload-area" @click="$refs.uploadInput.click()">
                <div class="upload-content" :class="{ 'has-image': originalImage }">
                  <i class="el-icon-picture-outline upload-icon"></i>
                  <div class="upload-text">
                    <p class="main-text">拖放图片或点击上传</p>
                    <p class="sub-text">支持 JPG, PNG, BMP, WEBP 格式</p>
                  </div>
                  <input
                    ref="uploadInput"
                    type="file"
                    accept=".jpg,.jpeg,.png,.bmp,.webp"
                    @change="handleFileChange"
                    style="display: none"
                  />
                </div>
              </div>

              <!-- 图片预览 -->
              <div v-if="originalImage" class="image-preview-tech">
                <div class="preview-header">
                  <span>图像预览</span>
                  <el-tag type="info">{{ formatFileSize(uploadedFile.size) }}</el-tag>
                </div>
                <div class="preview-container-tech">
                  <img :src="originalImage" class="preview-image-tech" />
                  <div class="image-overlay">
                    <div class="image-info-tech">
                      <p><i class="el-icon-document"></i> {{ uploadedFile.name }}</p>
                    </div>
                  </div>
                </div>

                <!-- 识别按钮 -->
                <el-button
                  class="detect-btn"
                  type="primary"
                  @click="detectPest"
                  :loading="detecting"
                  :disabled="!originalImage"
                >
                  <i class="el-icon-search"></i>
                  {{ detecting ? 'AI分析中...' : '开始智能识别' }}
                  <div class="btn-glow"></div>
                </el-button>
              </div>
            </div>
          </el-col>

          <!-- 右侧结果区域 -->
          <el-col :span="12">
            <div class="tech-result-section">
              <div class="section-header">
                <h3 class="section-title">
                  <i class="el-icon-data-analysis"></i>
                  识别结果
                </h3>
                <div class="action-buttons-tech">
                  <el-button
                    class="action-btn"
                    type="text"
                    @click="saveRecord"
                    :disabled="!resultImage || saving"
                    :loading="saving"
                  >
                    <i class="el-icon-folder-checked"></i>
                    保存记录
                  </el-button>
                  <el-button
                    class="action-btn"
                    type="text"
                    @click="downloadResult"
                    :disabled="!resultImage"
                  >
                    <i class="el-icon-download"></i>
                    下载结果
                  </el-button>
                </div>
              </div>

              <!-- 识别状态 -->
              <div v-if="detecting" class="detecting-status-tech">
                <div class="ai-loading">
                  <div class="loading-animation">
                    <div class="pulse-ring"></div>
                    <div class="pulse-ring delay-1"></div>
                    <div class="pulse-ring delay-2"></div>
                    <i class="el-icon-loading loading-icon"></i>
                  </div>
                  <div class="loading-text">
                    <h4>AI模型正在分析</h4>
                    <p>深度神经网络处理中，请稍候...</p>
                  </div>
                </div>
              </div>

              <!-- 识别结果 -->
              <div v-else-if="resultImage" class="result-container-tech">
                <!-- 结果图像 -->
                <div class="result-image-section">
                  <div class="result-header">
                    <span>检测结果可视化</span>
                    <el-tag type="success">分析完成</el-tag>
                  </div>
                  <div class="result-preview">
                    <img :src="resultImage" class="result-image-tech" />
                    <div class="result-overlay">
                      <div class="result-stats">
                        <span class="stat-item">
                          <i class="el-icon-aim"></i>
                          {{ detections.length }} 个目标
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 检测详情 -->
                <div v-if="detections.length > 0" class="detection-details">
                  <div class="details-header">
                    <h4><i class="el-icon-tickets"></i> 检测详情</h4>
                    <el-tag type="primary">置信度分析</el-tag>
                  </div>

                  <div class="tech-table-container">
                    <el-table
                      :data="detections"
                      class="tech-table"
                      stripe
                      max-height="300"
                    >
                      <el-table-column type="index" label="序号" width="80" align="center">
                        <template #default="scope">
                          <div class="index-badge">{{ scope.$index + 1 }}</div>
                        </template>
                      </el-table-column>

                      <el-table-column prop="class_name" label="病虫害类别" min-width="150">
                        <template #default="scope">
                          <div class="disease-name">
                            <i class="el-icon-orange"></i>
                            {{ scope.row.class_name }}
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column prop="confidence" label="置信度" width="140" align="center">
                        <template #default="scope">
                          <div class="confidence-display">
                            <div class="confidence-bar">
                              <div
                                class="confidence-fill"
                                :style="{ width: (scope.row.confidence * 100) + '%' }"
                                :class="getConfidenceClass(scope.row.confidence)"
                              ></div>
                            </div>
                            <span class="confidence-value">
                              {{ (scope.row.confidence * 100).toFixed(1) }}%
                            </span>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column label="位置坐标" min-width="180">
                        <template #default="scope">
                          <div class="coordinate-display">
                            [{{ scope.row.bbox.x1.toFixed(0) }}, {{ scope.row.bbox.y1.toFixed(0) }}]
                            <br>
                            [{{ scope.row.bbox.x2.toFixed(0) }}, {{ scope.row.bbox.y2.toFixed(0) }}]
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>

                  <!-- 统计摘要 -->
                  <div class="summary-stats">
                    <div class="stat-card">
                      <div class="stat-icon high-confidence"></div>
                      <div class="stat-content">
                        <div class="stat-value">{{ highConfidenceCount }}</div>
                        <div class="stat-label">高置信度</div>
                      </div>
                    </div>
                    <div class="stat-card">
                      <div class="stat-icon medium-confidence"></div>
                      <div class="stat-content">
                        <div class="stat-value">{{ mediumConfidenceCount }}</div>
                        <div class="stat-label">中置信度</div>
                      </div>
                    </div>
                    <div class="stat-card">
                      <div class="stat-icon total-detections"></div>
                      <div class="stat-content">
                        <div class="stat-value">{{ detections.length }}</div>
                        <div class="stat-label">总检测数</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 无检测结果 -->
                <div v-else class="no-detections-tech">
                  <div class="empty-state">
                    <i class="el-icon-warning-outline empty-icon"></i>
                    <h4>未检测到病虫害</h4>
                    <p>在当前图像中未发现明显的病虫害特征</p>
                    <el-button type="text" @click="testDetection">尝试测试识别</el-button>
                  </div>
                </div>
              </div>

              <!-- 空状态 -->
              <div v-else class="empty-result-tech">
                <div class="empty-state">
                  <div class="empty-animation">
                    <i class="el-icon-picture"></i>
                  </div>
                  <h4>等待识别结果</h4>
                  <p>上传图片并开始识别后，结果将显示在这里</p>
                  <el-button class="test-btn" @click="testDetection">快速测试</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- AI助手区域 - 移动到el-row外部，占据整个宽度 -->
        <div v-if="resultImage" class="ai-assistant-section-wide">
          <div class="ai-wide-header">
            <div class="header-left">
              <i class="el-icon-chat-dot-round ai-header-icon"></i>
              <h3 class="ai-wide-title">AI病虫害助手</h3>
              <div class="ai-status-tag">
                <div class="status-dot online"></div>
                <span>智能在线</span>
              </div>
            </div>
            <div class="header-right">
              <el-tag type="warning" effect="dark">智能问答</el-tag>
              <el-button
                class="ai-help-btn"
                type="text"
                size="mini"
                @click="showAIHelp"
              >
                <i class="el-icon-question"></i>
                使用帮助
              </el-button>
            </div>
          </div>

          <div class="ai-wide-content">
            <div class="ai-description-wide">
              <p>基于识别结果，AI助手可以为您提供更多关于该病虫害的详细信息、防治措施和专家建议</p>
            </div>

            <div v-if="mainDisease" class="ai-quick-actions">
              <div class="quick-action-buttons">
                <el-button
                  class="quick-action-btn"
                  type="primary"
                  @click="askAIAboutDisease"
                  :loading="aiLoading"
                  icon="el-icon-chat-dot-round"
                >
                  询问「{{ mainDisease }}」的详细信息
                </el-button>
              </div>
            </div>

            <!-- 内嵌AI对话组件 - 调整宽度 -->
            <div class="embedded-chat-wide">
              <ai-chat-assistant
                ref="aiAssistant"
                :initial-message="initialAIMessage"
                :auto-send="autoSendQuery"
              />
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { detectPest, checkHealth, testDetection } from "@/api/pest/detection";
import { addRecord } from "@/api/insect/record";
// 引入AI对话组件
import AiChatAssistant from "@/components/AiChatAssistant";

export default {
  name: "PestDetection",
  components: {
    AiChatAssistant,
  },
  data() {
    return {
      uploadedFile: null,
      originalImage: null,
      resultImage: null,
      detecting: false,
      detections: [],
      serviceStatus: null,
      healthLoading: false,
      saving: false,
      saveLoading: false,
      recognitionData: {
        resultImage: null,
        originalImage: null,
        predictions: [],
        recognitionTime: null
      },
      mainDisease: '',
      predictions: [],
      imageFile: null,
      // 新增AI相关数据
      aiLoading: false, // AI查询加载状态
      initialAIMessage: "", // 初始化AI消息
      autoSendQuery: false, // 是否自动发送查询
    };
  },
  computed: {
    highConfidenceCount() {
      return this.detections.filter(d => d.confidence >= 0.8).length;
    },
    mediumConfidenceCount() {
      return this.detections.filter(d => d.confidence >= 0.5 && d.confidence < 0.8).length;
    }
  },
  watch: {
    // 监听detections变化，提取主要病虫害
    detections: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          // 找到置信度最高的病虫害
          const mainPrediction = newVal.reduce((prev, current) =>
            (prev.confidence > current.confidence) ? prev : current
          );
          this.mainDisease = mainPrediction.class_name;

          // 设置初始化AI消息
          this.initialAIMessage = `我识别出了植物病害「${this.mainDisease}」，请告诉我关于这种病害的详细信息，包括症状和防治措施。`;
        } else {
          this.mainDisease = '';
          this.initialAIMessage = '';
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.checkServiceHealth();
  },
  methods: {
    // 新增AI询问方法
    askAIPrevention() {
      if (!this.mainDisease) {
        this.$message.warning('请先识别出病虫害');
        return;
      }

      this.aiLoading = true;
      this.initialAIMessage = `我识别出了植物病害「${this.mainDisease}」，请告诉我针对这种病害的防治措施和预防方法。`;
      this.autoSendQuery = true;

      setTimeout(() => {
        this.autoSendQuery = false;
        this.aiLoading = false;
      }, 100);
    },

    askAISymptoms() {
      if (!this.mainDisease) {
        this.$message.warning('请先识别出病虫害');
        return;
      }

      this.aiLoading = true;
      this.initialAIMessage = `我识别出了植物病害「${this.mainDisease}」，请详细描述这种病害的症状特征和识别方法。`;
      this.autoSendQuery = true;

      setTimeout(() => {
        this.autoSendQuery = false;
        this.aiLoading = false;
      }, 100);
    },

    showAIHelp() {
      this.$message.info('AI助手可以帮助您了解病虫害的详细信息、防治措施和识别特征');
    },
    // 修改原有的询问方法
    askAIAboutDisease() {
      if (!this.mainDisease) {
        this.$message.warning('请先识别出病虫害');
        return;
      }

      this.aiLoading = true;
      this.initialAIMessage = `我识别出了植物病害「${this.mainDisease}」，请告诉我关于这种病害的详细信息，包括病因、传播途径和危害程度。`;
      this.autoSendQuery = true;

      setTimeout(() => {
        this.autoSendQuery = false;
        this.aiLoading = false;
      }, 100);
    },

    handleFileChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp', 'image/webp'];
      if (!validTypes.includes(file.type)) {
        this.$message.error('请上传图片文件（jpg、png、bmp、webp格式）');
        return;
      }

      const maxSize = 10 * 1024 * 1024;
      if (file.size > maxSize) {
        this.$message.error('图片大小不能超过10MB');
        return;
      }

      this.uploadedFile = file;
      this.imageFile = file;
      this.originalImage = URL.createObjectURL(file);
      this.resultImage = null;
      this.detections = [];
      this.mainDisease = '';
      this.initialAIMessage = '';

      this.$message.success('图片上传成功，点击"开始智能识别"进行分析');
    },

    async saveRecord() {
      if (!this.resultImage) {
        this.$message.warning("没有可保存的识别结果");
        return;
      }

      this.saving = true;

      try {
        let resultImageBase64 = this.resultImage;
        let originalImageBase64 = this.originalImage;

        if (resultImageBase64 && resultImageBase64.includes('base64,')) {
          resultImageBase64 = resultImageBase64.split('base64,')[1];
        }

        if (originalImageBase64 && originalImageBase64.includes('base64,')) {
          originalImageBase64 = originalImageBase64.split('base64,')[1];
        }

        const now = new Date();
        const recognitionTime = now.toISOString().replace('T', ' ').substring(0, 19);

        let mainDisease = '未识别到病害';
        let maxConfidence = 0;
        if (this.detections && this.detections.length > 0) {
          const maxDetection = this.detections.reduce((prev, current) =>
            (prev.confidence > current.confidence) ? prev : current
          );
          mainDisease = maxDetection.class_name || '未知病害';
          maxConfidence = maxDetection.confidence || 0;
        }

        const recordData = {
          resultImage: resultImageBase64,
          originalImage: originalImageBase64,
          predictions: JSON.stringify(this.detections || []),
          mainDisease: mainDisease,
          confidence: maxConfidence,
          recognitionTime: recognitionTime,
          imageName: this.uploadedFile ? this.uploadedFile.name : '识别图片'
        };

        const response = await addRecord(recordData);

        if (response.code === 200) {
          this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败: " + response.msg);
        }
      } catch (error) {
        console.error("保存记录失败:", error);
        this.$message.error("保存失败: " + (error.message || '未知错误'));
      } finally {
        this.saving = false;
      }
    },

    handleFileRemove() {
      this.uploadedFile = null;
      this.originalImage = null;
      this.resultImage = null;
      this.detections = [];
      this.mainDisease = '';
      this.initialAIMessage = '';
    },

    clearAll() {
      this.uploadedFile = null;
      this.originalImage = null;
      this.resultImage = null;
      this.detections = [];
      this.imageFile = null;
      this.mainDisease = '';
      this.predictions = [];
      this.saving = false;
      this.saveLoading = false;
      this.initialAIMessage = '';
      this.$message.info('已清空所有内容');
    },

    formatFileSize(bytes) {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },

    async checkServiceHealth() {
      this.healthLoading = true;
      try {
        const response = await checkHealth();
        this.serviceStatus = response.data;
        if (response.data) {
          this.$message.success('AI服务运行正常');
        } else {
          this.$message.error('AI服务暂时不可用');
        }
      } catch (error) {
        console.error('服务健康检查失败:', error);
        this.serviceStatus = false;
        this.$message.error('AI服务连接失败');
      } finally {
        this.healthLoading = false;
      }
    },

    async detectPest() {
      if (!this.uploadedFile) {
        this.$message.warning('请先上传图片');
        return;
      }

      this.detecting = true;
      this.resultImage = null;
      this.detections = [];
      this.mainDisease = '';
      this.initialAIMessage = '';

      try {
        const formData = new FormData();
        formData.append('imageFile', this.uploadedFile);

        const response = await detectPest(formData);

        if (response.data.success) {
          const base64Data = response.data.result_image_base64;
          console.log('识别返回的 base64 数据长度:', base64Data ? base64Data.length : 0);

          if (base64Data) {
            this.resultImage = 'data:image/jpeg;base64,' + base64Data;
            console.log('设置后的 resultImage 长度:', this.resultImage.length);
          } else {
            console.error('识别返回的 base64 数据为空');
            this.$message.error('识别结果图片数据为空');
          }

          this.detections = response.data.detections || [];

          if (this.detections.length > 0) {
            this.$message.success(`识别完成，共检测到 ${this.detections.length} 个目标`);
          } else {
            this.$message.warning('识别完成，但未检测到病虫害目标');
          }
        } else {
          this.$message.error(response.data.message || '识别失败');
        }
      } catch (error) {
        console.error('识别错误:', error);
        if (error.response && error.response.data) {
          this.$message.error('识别失败: ' + (error.response.data.msg || error.response.data.message));
        } else {
          this.$message.error('识别过程中发生错误: ' + error.message);
        }
      } finally {
        this.detecting = false;
      }
    },

    async testDetection() {
      this.detecting = true;
      try {
        const response = await testDetection();

        if (response.data.success) {
          this.resultImage = 'data:image/jpeg;base64,' + response.data.result_image_base64;
          this.$message.success('测试识别成功');
        } else {
          this.$message.error(response.data.message || '测试识别失败');
        }
      } catch (error) {
        console.error('测试识别错误:', error);
        this.$message.error('测试识别失败: ' + error.message);
      } finally {
        this.detecting = false;
      }
    },

    downloadResult() {
      if (!this.resultImage) {
        this.$message.warning('没有可下载的结果');
        return;
      }

      const link = document.createElement('a');
      link.href = this.resultImage;
      link.download = `detection_result_${new Date().getTime()}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      this.$message.success('结果图片下载成功');
    },

    getConfidenceClass(confidence) {
      if (confidence >= 0.8) return 'high';
      if (confidence >= 0.5) return 'medium';
      return 'low';
    }
  },

  beforeUnmount() {
    if (this.originalImage) {
      URL.revokeObjectURL(this.originalImage);
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f0f1a 30%, #0a0a14 70%, #050510 100%);
  min-height: 100vh;
}

.tech-header-glow {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    #00ffcc, #00ccff, #ff00cc,
    transparent);
  margin-bottom: 20px;
  animation: headerShimmer 3s infinite;
}

.tech-main-card {
  background: linear-gradient(135deg, rgba(20, 25, 45, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
  border: 1px solid rgba(0, 150, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 100, 255, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;

  ::v-deep(.el-card__header) {
    background: linear-gradient(135deg, rgba(0, 40, 80, 0.4) 0%, rgba(0, 20, 40, 0.6) 100%);
    border-bottom: 1px solid rgba(0, 150, 255, 0.2);
    padding: 20px 30px;
  }
}

.tech-card-header {
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title-section {
    .title-icon {
      font-size: 24px;
      color: #00ccff;
      margin-right: 12px;
    }

    .tech-title {
      display: inline;
      font-size: 28px;
      font-weight: 700;
      background: linear-gradient(135deg, #00ffcc, #00ccff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0;
      margin-right: 15px;
    }

    .title-sub {
      display: inline;
      color: #8899cc;
      font-size: 14px;
      font-weight: 300;
    }
  }

  .status-section {
    .tech-status-btn {
      background: rgba(0, 40, 80, 0.6);
      border: 1px solid rgba(0, 150, 255, 0.3);
      color: #ccddff;
      border-radius: 20px;
      padding: 8px 16px;
      position: relative;
      transition: all 0.3s ease;

      &:hover {
        border-color: #00ccff;
        box-shadow: 0 0 15px rgba(0, 204, 255, 0.3);
      }

      .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff4444;
        margin-left: 8px;
        display: inline-block;

        &.online {
          background: #00ff88;
          box-shadow: 0 0 10px #00ff88;
        }
      }
    }
  }
}

.service-status {
  margin-bottom: 30px;

  .status-card {
    background: rgba(20, 25, 45, 0.8);
    border: 1px solid;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    &.online {
      border-color: rgba(0, 255, 136, 0.3);
      .status-icon { color: #00ff88; }
    }

    &:not(.online) {
      border-color: rgba(255, 68, 68, 0.3);
      .status-icon { color: #ff4444; }
    }

    .status-icon {
      font-size: 20px;
      margin-right: 12px;
    }

    .status-text {
      color: #ccddff;
      font-weight: 500;
    }

    .status-glow {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent);
      transition: left 0.6s ease;
    }

    &:hover .status-glow {
      left: 100%;
    }
  }
}

.tech-content {
  padding: 10px;
}

.tech-upload-section,
.tech-result-section {
  background: rgba(15, 20, 40, 0.6);
  border: 1px solid rgba(0, 150, 255, 0.15);
  border-radius: 12px;
  padding: 25px;
  height: 100%;
  min-height: 600px;
  backdrop-filter: blur(5px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;

  .section-title {
    color: #ccddff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;

    i {
      color: #00ccff;
      margin-right: 8px;
    }
  }

  .clear-btn,
  .action-btn {
    color: #8899cc;
    background: transparent;
    border: none;

    &:hover {
      color: #00ccff;
    }

    i {
      margin-right: 4px;
    }
  }
}

.upload-area {
  background: rgba(10, 15, 30, 0.6);
  border: 2px dashed rgba(0, 150, 255, 0.3);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 25px;

  &:hover {
    border-color: #00ccff;
    background: rgba(0, 40, 80, 0.3);

    .upload-icon {
      color: #00ccff;
      transform: scale(1.1);
    }
  }

  .upload-content {
    .upload-icon {
      font-size: 48px;
      color: #6677aa;
      margin-bottom: 15px;
      transition: all 0.3s ease;
    }

    .upload-text {
      .main-text {
        color: #ccddff;
        font-size: 16px;
        font-weight: 500;
        margin: 0 0 8px 0;
      }

      .sub-text {
        color: #8899cc;
        font-size: 14px;
        margin: 0;
      }
    }

    &.has-image {
      .upload-icon {
        color: #00ff88;
      }
    }
  }
}

.image-preview-tech {
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    span {
      color: #ccddff;
      font-weight: 500;
    }
  }

  .preview-container-tech {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;

    .preview-image-tech {
      width: 100%;
      max-height: 250px;
      object-fit: contain;
      display: block;
    }

    .image-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
      padding: 15px;

      .image-info-tech {
        color: white;
        font-size: 12px;

        p {
          margin: 0;
          display: flex;
          align-items: center;

          i {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

.detect-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #00ccff, #0099ff);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 204, 255, 0.4);

    .btn-glow {
      opacity: 1;
    }
  }

  &:disabled {
    background: #6677aa;
    transform: none;
    box-shadow: none;
  }

  .btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
    transition: left 0.6s ease, opacity 0.3s ease;
    opacity: 0;
  }

  &:hover .btn-glow {
    left: 100%;
  }
}

.detecting-status-tech {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;

  .ai-loading {
    text-align: center;

    .loading-animation {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;

      .pulse-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #00ccff;
        border-radius: 50%;
        animation: pulse 2s infinite;

        &.delay-1 {
          animation-delay: 0.7s;
        }

        &.delay-2 {
          animation-delay: 1.4s;
        }
      }

      .loading-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        color: #00ccff;
      }
    }

    .loading-text {
      h4 {
        color: #ccddff;
        margin: 0 0 8px 0;
      }

      p {
        color: #8899cc;
        margin: 0;
      }
    }
  }
}

.result-container-tech {
  .result-image-section {
    margin-bottom: 25px;

    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      span {
        color: #ccddff;
        font-weight: 500;
      }
    }

    .result-preview {
      position: relative;
      border-radius: 8px;
      overflow: hidden;

      .result-image-tech {
        width: 100%;
        max-height: 250px;
        object-fit: contain;
        display: block;
      }

      .result-overlay {
        position: absolute;
        top: 10px;
        right: 10px;

        .result-stats {
          background: rgba(0, 0, 0, 0.7);
          padding: 8px 12px;
          border-radius: 6px;

          .stat-item {
            color: white;
            font-size: 12px;
            display: flex;
            align-items: center;

            i {
              margin-right: 4px;
              color: #00ff88;
            }
          }
        }
      }
    }
  }
}

.detection-details {
  .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h4 {
      color: #ccddff;
      margin: 0;
      display: flex;
      align-items: center;

      i {
        color: #00ccff;
        margin-right: 8px;
      }
    }
  }
}

.tech-table-container {
  ::v-deep(.tech-table) {
    background: transparent;

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      background: rgba(10, 15, 30, 0.6);
    }

    th {
      background: rgba(0, 40, 80, 0.6) !important;
      color: #ccddff !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.2);
    }

    td {
      background: transparent !important;
      color: #ccddff !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.1);
    }

    .el-table__row:hover td {
      background: rgba(0, 40, 80, 0.3) !important;
    }
  }

  .index-badge {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #00ccff, #0099ff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin: 0 auto;
  }

  .disease-name {
    display: flex;
    align-items: center;

    i {
      color: #ffcc00;
      margin-right: 8px;
    }
  }

  .confidence-display {
    display: flex;
    align-items: center;
    gap: 10px;

    .confidence-bar {
      flex: 1;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      overflow: hidden;

      .confidence-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;

        &.high { background: linear-gradient(90deg, #00ff88, #00cc88); }
        &.medium { background: linear-gradient(90deg, #ffcc00, #ffaa00); }
        &.low { background: linear-gradient(90deg, #ff4444, #cc0000); }
      }
    }

    .confidence-value {
      color: #ccddff;
      font-size: 12px;
      font-weight: 600;
      min-width: 40px;
    }
  }

  .coordinate-display {
    font-size: 11px;
    color: #8899cc;
    line-height: 1.4;
  }
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 20px;

  .stat-card {
    background: rgba(10, 15, 30, 0.8);
    border: 1px solid rgba(0, 150, 255, 0.2);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;

    .stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;

      &.high-confidence { background: linear-gradient(135deg, #00ff88, #00cc66); }
      &.medium-confidence { background: linear-gradient(135deg, #ffcc00, #ffaa00); }
      &.total-detections { background: linear-gradient(135deg, #00ccff, #0099ff); }
    }

    .stat-content {
      .stat-value {
        color: #ccddff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
      }

      .stat-label {
        color: #8899cc;
        font-size: 12px;
        margin-top: 2px;
      }
    }
  }
}

/* 宽版AI助手样式 - 修改为占据整个宽度 */
.ai-assistant-section-wide {
  margin-top: 30px;
  background: linear-gradient(135deg, rgba(15, 25, 45, 0.9) 0%, rgba(10, 20, 40, 0.95) 100%);
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 100, 255, 0.1),
    0 0 0 1px rgba(0, 255, 255, 0.1) inset;
  overflow: hidden;
  width: 100%;

  .ai-wide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(0, 40, 80, 0.6) 0%, rgba(0, 20, 40, 0.8) 100%);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);

    .header-left {
      display: flex;
      align-items: center;
      gap: 15px;

      .ai-header-icon {
        font-size: 24px;
        color: #00ffcc;
        background: rgba(0, 255, 204, 0.1);
        padding: 8px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
      }

      .ai-wide-title {
        color: #ffffff;
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(135deg, #00ffcc, #00ccff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .ai-status-tag {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 255, 136, 0.1);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 20px;
        padding: 6px 12px;

        .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ff4444;

          &.online {
            background: #00ff88;
            box-shadow: 0 0 10px #00ff88;
            animation: pulse 2s infinite;
          }
        }

        span {
          color: #00ff88;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;

      .ai-help-btn {
        color: #8899cc;
        font-size: 12px;

        &:hover {
          color: #00ccff;
        }
      }
    }
  }

  .ai-wide-content {
    padding: 0;

    .ai-description-wide {
      padding: 20px 25px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(10, 15, 30, 0.4);

      p {
        color: #aaccff;
        margin: 0;
        text-align: center;
        font-size: 14px;
        line-height: 1.5;
      }
    }

    .ai-quick-actions {
      padding: 20px 25px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(15, 20, 40, 0.6);

      .quick-action-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;

        .quick-action-btn {
          border-radius: 25px;
          padding: 12px 20px;
          font-weight: 600;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
              transparent,
              rgba(255, 255, 255, 0.2),
              transparent);
            transition: left 0.6s ease;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

            &::before {
              left: 100%;
            }
          }
        }
      }
    }

    .embedded-chat-wide {
      width: 100%;

      /* 确保AI聊天组件充分利用宽度 */
      ::v-deep .ai-chat-assistant {
        width: 100%;

        /* 如果AI聊天组件有容器，确保它们也充分利用宽度 */
        ::v-deep .chat-container {
          width: 100%;
        }

        ::v-deep .messages-container {
          width: 100%;
        }

        ::v-deep .input-container {
          width: 100%;
        }
      }
    }
  }
}

.no-detections-tech,
.empty-result-tech {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;

  .empty-state {
    text-align: center;

    .empty-icon {
      font-size: 48px;
      color: #ffcc00;
      margin-bottom: 15px;
    }

    .empty-animation {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #00ccff, #0099ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;

      i {
        font-size: 32px;
        color: white;
      }
    }

    h4 {
      color: #ccddff;
      margin: 0 0 8px 0;
    }

    p {
      color: #8899cc;
      margin: 0 0 15px 0;
    }

    .test-btn {
      background: linear-gradient(135deg, #00ccff, #0099ff);
      border: none;
      color: white;
      border-radius: 20px;
      padding: 8px 20px;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 204, 255, 0.3);
      }
    }
  }
}

@keyframes headerShimmer {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .tech-card-header .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .summary-stats {
    grid-template-columns: 1fr;
  }

  .ai-assistant-section-wide {
    margin-top: 20px;
    border-radius: 12px;

    .ai-wide-header {
      flex-direction: column;
      gap: 15px;
      padding: 15px;

      .header-left {
        flex-direction: column;
        text-align: center;
        gap: 10px;
      }

      .header-right {
        width: 100%;
        justify-content: center;
      }
    }

    .ai-quick-actions {
      padding: 15px;

      .quick-action-buttons {
        flex-direction: column;
        align-items: stretch;

        .quick-action-btn {
          width: 100%;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
